<template>
    <div>
        <el-dialog :close-on-click-modal="false" :visible.sync="visible" @closed="dialogClose">
            <el-dialog width="40%" title="选择属性" :visible.sync="innerVisible" append-to-body>
                <div>
                    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
                        <el-form-item>
                            <el-input v-model="dataForm.key" placeholder="参数名" clearable></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button @click="getDataList()">查询</el-button>
                        </el-form-item>
                    </el-form>
                    <el-table :data="dataList" border v-loading="dataListLoading"
                        @selection-change="innerSelectionChangeHandle" style="width: 100%;">
                        <el-table-column type="selection" header-align="center" align="center"></el-table-column>
                        <el-table-column prop="attrId" header-align="center" align="center" label="属性id"></el-table-column>
                        <el-table-column prop="attrName" header-align="center" align="center" label="属性名"></el-table-column>
                        <el-table-column prop="icon" header-align="center" align="center" label="属性图标"></el-table-column>
                        <el-table-column prop="valueSelect" header-align="center" align="center"
                            label="可选值列表"></el-table-column>
                    </el-table>
                    <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
                        :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage"
                        layout="total, sizes, prev, pager, next, jumper"></el-pagination>
                </div>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="innerVisible = false">取 消</el-button>
                    <el-button type="primary" @click="submitAddRealtion">确认新增</el-button>
                </div>
            </el-dialog>
            <el-row>
                <el-col :span="24">
                    <el-button type="primary" @click="addRelation">新建关联</el-button>
                    <el-button type="danger" @click="batchDeleteRelation"
                        :disabled="dataListSelections.length <= 0">批量删除</el-button>
                    <!--  -->
                    <el-table :data="relationAttrs" style="width: 100%" @selection-change="selectionChangeHandle" border>
                        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
                        <el-table-column prop="attrId" label="#"></el-table-column>
                        <el-table-column prop="attrName" label="属性名"></el-table-column>
                        <el-table-column prop="valueSelect" label="可选值">
                            <template slot-scope="scope">
                                <el-tooltip placement="top">
                                    <div slot="content">
                                        <span v-for="(i, index) in scope.row.valueSelect.split(';')" :key="index">
                                            {{ i }}
                                            <br />
                                        </span>
                                    </div>
                                    <el-tag>{{ scope.row.valueSelect.split(";")[0] + " ..." }}</el-tag>
                                </el-tooltip>
                            </template>
                        </el-table-column>
                        <el-table-column fixed="right" header-align="center" align="center" label="操作">
                            <template slot-scope="scope">
                                <el-button type="text" size="small" @click="relationRemove(scope.row.attrId)">移除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
        </el-dialog>
    </div>
</template>
  
<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    props: {},
    data() {
        //这里存放数据
        return {
            attrGroupId: 0,
            visible: false,
            innerVisible: false,
            relationAttrs: [],
            dataListSelections: [],
            dataForm: {
                key: ""
            },
            dataList: [],
            pageIndex: 1,
            pageSize: 10,
            totalPage: 0,
            dataListLoading: false,
            innerdataListSelections: []
        };
    },
    //计算属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        selectionChangeHandle(val) {
            this.dataListSelections = val;
        },
        innerSelectionChangeHandle(val) {
            this.innerdataListSelections = val;
        },
        addRelation() {
            this.getDataList();
            this.innerVisible = true;
        },
        batchDeleteRelation(val) {
            let postData = [];
            this.dataListSelections.forEach(item => {
                postData.push({ attrId: item.attrId, attrGroupId: this.attrGroupId });
            });
            this.$http({
                url: this.$http.adornUrl("/produce/attrgroup/attr/relation/delete"),
                method: "post",
                data: this.$http.adornData(postData, false)
            }).then(({ data }) => {
                if (data.code == 0) {
                    this.$message({ type: "success", message: "删除成功" });
                    this.init(this.attrGroupId);
                } else {
                    this.$message({ type: "error", message: data.msg });
                }
            });
        },
        //移除关联
        relationRemove(attrId) {
            let data = [];
            data.push({ attrId, attrGroupId: this.attrGroupId });
            this.$http({
                url: this.$http.adornUrl("/produce/attrgroup/attr/relation/delete"),
                method: "post",
                data: this.$http.adornData(data, false)
            }).then(({ data }) => {
                if (data.code == 0) {
                    this.$message({ type: "success", message: "删除成功" });
                    this.init(this.attrGroupId);
                } else {
                    this.$message({ type: "error", message: data.msg });
                }
            });
        },
        submitAddRealtion() {
            this.innerVisible = false;
            //准备数据
            console.log("准备新增的数据", this.innerdataListSelections);
            if (this.innerdataListSelections.length > 0) {
                let postData = [];
                this.innerdataListSelections.forEach(item => {
                    postData.push({ attrId: item.attrId, attrGroupId: this.attrGroupId });
                });
                this.$http({
                    url: this.$http.adornUrl("/produce/attrgroup/attr/relation"),
                    method: "post",
                    data: this.$http.adornData(postData, false)
                }).then(({ data }) => {
                    if (data.code == 0) {
                        this.$message({ type: "success", message: "新增关联成功" });
                    }
                    this.$emit("refreshData");
                    this.init(this.attrGroupId);
                });
            } else {
            }
        },
        init(id) {
            this.attrGroupId = id || 0;
            this.visible = true;
            this.$http({
                url: this.$http.adornUrl(
                    "/produce/attrgroup/" + this.attrGroupId + "/attr/relation"
                ),
                method: "get",
                params: this.$http.adornParams({})
            }).then(({ data }) => {
                this.relationAttrs = data.data;
            });
        },
        dialogClose() { },

        //========
        // 获取数据列表
        getDataList() {
            this.dataListLoading = true;
            this.$http({
                url: this.$http.adornUrl(
                    "/produce/attrgroup/" + this.attrGroupId + "/noattr/relation"
                ),
                method: "get",
                params: this.$http.adornParams({
                    page: this.pageIndex,
                    limit: this.pageSize,
                    key: this.dataForm.key
                })
            }).then(({ data }) => {
                if (data && data.code === 0) {
                    this.dataList = data.page.list;
                    this.totalPage = data.page.totalCount;
                } else {
                    this.dataList = [];
                    this.totalPage = 0;
                }
                this.dataListLoading = false;
            });
        },
        // 每页数
        sizeChangeHandle(val) {
            this.pageSize = val;
            this.pageIndex = 1;
            this.getDataList();
        },
        // 当前页
        currentChangeHandle(val) {
            this.pageIndex = val;
            this.getDataList();
        }
    }
};
</script>
<style scoped>
  </style>